<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>模板文件</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <style>
    .my-border,.my-border-0,.my-border-0+div>div{
      width:0;
      height:0;
      border-width:140px;
      border-style:solid;
      border-color:red black yellow pink;
    }
    .shangchuan{
      width:120px;
      height:120px;
      border:1px dotted gray;
      text-align: center;
      line-height: 120px;
      cursor: pointer;
    }
    .card{
        min-width:1024px;
    }
  </style>
</head>
<body>
  <div class="container-fiuld p-3">
    <div class="card">
      <div class="card-header bg-transparent border-0">
      </div>
      <div class="card-body">
        <h3>我的推广二维码</h3>
        <button class="btn btn-link mb-3 border">复制推广链接</button>
        <div class="d-flex">
          <div>
            <div class="my-border"></div>
            <div class="mt-4" style="width:280px">
              <button class="btn btn-link  border">删除</button>
              <button class="btn btn-link  border">保存</button>
            </div>
          </div>
          <div class="ml-1 mr-1">
            <div class="my-border"></div>
            <div class="mt-4" style="width:280px">
              <button class="btn btn-link  border">删除</button>
              <button class="btn btn-link  border">保存</button>
            </div>
          </div>
          <div>
            <div class="my-border"></div>
            <div class="mt-4" style="width:280px">
              <button class="btn btn-link  border">删除</button>
              <button class="btn btn-link  border">保存</button>
            </div>
          </div>
        </div>
        <div class="row mt-5">
          <div class="col-lg-3 d-flex align-items-end">
            <div class="shangchuan"><i class="layui-icon layui-icon-add-1"></i></div>
            <div>
              <button class="ml-3 btn btn-primary">上传</button>
            </div>
          </div>
        </div>
        <p class="mt-3">
          适合手机浏览的二维码海报背景；<br>
          每行显示3-4个；<br>
          代理商可直接用官方提供的二维码模板，<br>
          也可自行设计二维码模板上传到代理后台，<br>
          生成自己的个性二维码推广模板；<br>
        </p>
      </div>
      <div class="card-footer bg-transparent border-0">
      </div>
    </div>
  </div>
</body>
</html>
